<template>
  <div class="hello">

<div style="width:300px;height:200px; overflow:scroll;">
    <ul v-for="(item, index) in talkData" :key="index">
      <li>{{item.username}}: {{item.content}}</li>
    </ul>
    </div>



    <input v-model="username" type="text" placeholder="请输入昵称"/>
    <input v-model="msg" type="text" placeholder="请输入发送的信息"/>
    <button @click="send">发送消息</button>

    <button @click="leave">离开</button>
  </div>
</template>

<script>
import io from 'socket.io-client'
var socket = io.connect('localhost:80')
var _this
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'hello',
      username: '',
      talkData: []
    }
  },
  methods: {
    send () {
      var msgobj = {username: this.username, content: this.msg}
      socket.emit('hi', JSON.stringify(msgobj))
      _this.talkData.push(msgobj)
    },
    leave () {
      window.close()
      socket.emit('leave', 'leave')
    }
  },
  mounted () {
     _this = this
    socket.on('c_hi', function (msg) {
      var obj = JSON.parse(msg)
      console.log('123'+ msg)
      _this.talkData.push(obj)
    })
  }
}
</script>
